<template>
  <div>
    <el-dialog
      v-dialogDrag
      :fullscreen="isFullscreen"
      :visible.sync="dialogVisible"
      :before-close="closeForm"
      width="4rem"
    >
      <div slot="title" class="header-title hd-title">
        <span>{{ dialogTitle }}</span>
        <i
          v-if="isFullscreen === false"
          class="el-icon-full-screen"
          @click="fScreen"
        ></i>

        <i v-else class="el-icon-news" @click="ifScreen"></i>
      </div>
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-row :gutter="0">
          <el-col :span="24">
            <el-form-item
              label="业务类型"
              :rules="[
                {
                  required: true,
                  message: '请选择业务类型',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="business"
              name="business"
            >
              <el-select
                style="display: block"
                placeholder="请选择业务类型"
                v-model="form.business"
                @change="changeBusiness"
              >
                <el-option
                  v-for="item in business_list"
                  :key="item.val"
                  :label="item.key"
                  :value="item.val"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="运输类型"
              :rules="[
                {
                  required: true,
                  message: '请选择运输类型',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="transport"
              name="transport"
            >
              <el-select
                style="display: block"
                placeholder="请选择运输类型"
                v-model="form.transport"
                @change="changeTransport"
              >
                <el-option
                  v-for="item in transport_list"
                  :key="item.val"
                  :label="item.key"
                  :value="item.val"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="运输渠道"
              :rules="[
                {
                  required: true,
                  message: '请选择运输渠道',
                  trigger: ['blur', 'change'],
                },
              ]"
              prop="channel_receipt_id"
              name="channel_receipt_id"
            >
              <el-select
                style="display: block"
                placeholder="请选择运输渠道"
                v-model="form.channel_receipt_id"
                @focus="selectChannel"
              >
                <el-option
                  v-for="item in channels"
                  :key="item.val"
                  :value="item.val"
                  :label="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="税金支付"
              prop="postCode"
              style="text-align: left"
              name="postCode"
            >
              <el-radio v-model="TaxesPay" :label="1">发货方付</el-radio>
              <el-radio v-model="TaxesPay" :label="2">收货方付</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="京东预付"
              prop="postCode"
              style="text-align: left"
              name="postCode"
            >
              <el-radio v-model="JDPay" :label="1">发货方付</el-radio>
              <el-radio v-model="JDPay" :label="2">收货方付</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="primary" @click="handleSubmit"
          ><i class="el-icon-circle-plus-outline"></i> 保存
        </el-button>
        <el-button size="small" @click="closeForm"
          ><i class="el-icon-circle-close"></i> 取消
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-row>
          <el-col :span="24">
            <el-steps
              :align-center="true"
              :active="active"
              finish-status="success"
            >
              <el-step title="开始"></el-step>
              <el-step title="校验" description="数据校验中..."></el-step>
              <el-step
                :status="status"
                :title="finishCheck || '待审核'"
                :description="description"
              ></el-step>
              <!--              <el-step-->
              <!--                :status="status1"-->
              <!--                :title="`${percentage}%`"-->
              <!--                :description="`数据上传中...剩余${total}条`"-->
              <!--              ></el-step>-->
              <!--              <el-step title="完成下单"></el-step>-->
            </el-steps>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBusiness, getTransport, getChannelReceipt } from "@/api/base";
import { newWebsocket } from "@/socket";
import Bus from "@/socket/bus";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    shipmentBoxIds: {
      type: Array,
      default: [],
    },
    active: {
      type: Number,
      default: 0,
    },
    finishCheck: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    status: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {
        business: "",
        transport: "",
        channel_receipt_id: "",
      },
      rules: {},
      TaxesPay: 1,
      JDPay: 1,
      business_list: [],
      transport_list: [],
      channels: [],
      percentage: 0,
      msg: 0,
      total: 0,
      status1: "",
      disabled: false,
    };
  },
  watch: {
    dialogVisible: {
      handler(val) {
        this.TaxesPay = 1;
        this.JDPay = 1;
        this.getBusiness();
        this.getTransport();
      },
    },
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submit", {
            channel_receipt_id: this.form.channel_receipt_id,
            TaxesPay: this.TaxesPay,
            JDPay: this.JDPay,
            orderIds: this.shipmentBoxIds,
          });
          return;
          newWebsocket();
          Bus.$on("message", (res) => {
            // console.log(res);
            this.getSock(res);
          });
        }
      });
    },
    getSock(msg) {
      if (msg.data !== "服务器连接成功！") {
        let data = "";
        if (typeof msg.data == "string") {
          try {
            data = JSON.parse(msg.data);
            if (data.status === 411) {
              this.load = false;
              this.$message.warning(data.msg);
              this.$emit("changeActive", 5);
              this.closeForm();
            }
            if (typeof data.msg == "number" && data.total >= 0) {
              this.percentage = data.msg;
              this.total = data.total;
              if (data.msg === 100) {
                this.$emit("changeActive", 5);
                this.$message.success("下单完成");
              }
            }
            if (data.client_id) {
              this.$emit("submit", {
                channel_receipt_id: this.form.channel_receipt_id,
                TaxesPay: this.TaxesPay,
                JDPay: this.JDPay,
                orderIds: this.shipmentBoxIds,
                client_id: data.client_id,
              });
            } else {
              return false;
            }
          } catch (e) {
            return false;
          }
        }
      }
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
        this.form = {};
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    selectChannel() {
      if (this.form.transport && this.form.business) {
        this.getChannelReceipt({
          transport: this.form.transport,
          business: this.form.business,
        });
      } else {
        this.$message({
          type: "warning",
          message: "请先选择运输类型和业务类型",
        });
      }
    },
    changeBusiness(val) {
      this.form.transport = "";
      this.form.channel_receipt_id = "";
    },
    changeTransport(val) {
      this.form.channel_receipt_id = "";
    },
    //----------------请求接口--------------
    async getBusiness() {
      const res = await getBusiness();
      if (res.data.status === 200) {
        this.business_list = res.data.data;
      }
    },
    async getTransport() {
      const res = await getTransport();
      if (res.data.status === 200) {
        this.transport_list = res.data.data;
      }
    },
    async getChannelReceipt(data) {
      const res = await getChannelReceipt(data);
      if (res.data.status === 200) {
        this.channels = res.data.data;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  color: #a9a9a9;
}

.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-textarea__inner {
  height: 230px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 0 20px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}
</style>
